<template>
	<div class="diy-view">
		<div class="container" ref="diyView" id="diy_container">
			<div class="photo_warp">
				<img :src="require('@/assets/test_photo.jpg')" alt="" class="photo">
			</div>
		</div>
		<ul class="btn_list">
			<li v-for="(item, index) in btnList" :key="index" @click="addSprite(item)">
				<img :src="item.src" :alt="item.name">
			</li>
		</ul>
		
		<div class="btn_warp">
			<button class="btn" @click="submit">确定</button>
		</div>
		<div class="result" v-if="img">
			<img :src="img" alt="">
		</div>
	</div>
</template>

<script>
	import AlloyFinger from 'alloyfinger'
	import Transform from 'css3transform'
	import html2canvas from 'html2canvas'
	export default {
		name: 'DiyView',
		data() {
			return {
				btnList: [
					{
						name: '薯条',
						src: require('@/assets/shutiao.png')
					},
					{
						name: '爆米花',
						src: require('@/assets/baomihua.png')
					},
					{
						name: '汉堡',
						src: require('@/assets/hanbao.png')
					},
					{
						name: '鸡腿',
						src: require('@/assets/jitui.png')
					},
					{
						name: '果汁',
						src: require('@/assets/guozhi.png')
					}
				],
				img: ''
			}
		},
		mounted() {
		},
		methods: {
			addSprite(item) {
				const container = this.$refs['diyView']
				const el = document.createElement('div')
				el.className = 'sprite_body'
				const sprite = document.createElement('img')
				sprite.src = item.src
				sprite.className = 'sprite_item'
				const delIcon = document.createElement('div')
				delIcon.className = 'sprite_del'
				el.appendChild(sprite)
				el.appendChild(delIcon)
				container.appendChild(el)
				Transform(el)
				el.translateX = 100
				el.translateY = 100
				delIcon.onclick = function() {
					el.remove()
				}
				let initScale = 1
				new AlloyFinger(el, {
					rotate: function(evt) {
						el.rotateZ += evt.angle
					},
					pinchStart: function() {
						initScale = el.scaleX
					},
					pinch: function(evt) {
						el.scaleX = el.scaleY = initScale * evt.zoom
					},
					pressMove: function(evt) {
						el.translateX += evt.deltaX
						el.translateY += evt.deltaY
					},
					tap: function(evt) {
						console.log(evt)
					},
					doubleTap: function() {
						let s = el.scaleX
						initScale = el.scaleX = el.scaleY = s * 1.5
					}
				})
			},
			async submit() {
				const container = this.$refs['diyView']
				const child =  container.getElementsByClassName('sprite_body')
				child.forEach(item => {
					item.style.border = '1px dotted transparent'
					item.getElementsByClassName('sprite_del')[0].remove()
				})
				const canvas = await html2canvas(container, { scale: 2 })
				const base64 = canvas.toDataURL('image/jpeg')
				this.img = base64
			}
		}
	}
</script>
<style lang="scss">
	#diy_container{
		.sprite_body{
			width: 2rem;
			height: 2rem;
			position: absolute;
			box-sizing: border-box;
			border: 1px dotted #fff;
			.sprite_item{
				width: 100%;
				height: 100%;
			}
			.sprite_del{
				width: 0.5rem;
				height: 0.5rem;
				position: absolute;
				z-index: 20;
				top: -0.2rem;
				right: -0.2rem;
				background-image: url(../../../assets/delete.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				background-position: center;
			}
		}
	}
</style>
<style lang="scss" scoped>
	
	.diy-view{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		.container{
			width: 7.5rem;
			height: 7.5rem;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #eee;
			overflow: hidden;
			.photo_warp{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				.photo{
					width: 100%;
					height: auto;
				}
			}
			
		}
		.result{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 200;
			background-color: $-bg-point7;
			img{
				width: 100%;
				height: auto;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
		.btn_list{
			width: 100%;
			display: flex;
			justify-content: space-between;
			position: absolute;
			bottom: 2rem;
			left: 0;
			box-sizing: border-box;
			border-top: 2px solid #ebebeb;
			background-color: #eee;
			li{
				width: 20%;
				height: auto;
				img{
					width: 100%;
					height: auto;
				}
			}
		}
		.btn_warp{
			width: 7.5rem;
			position: absolute;
			left: 0;
			bottom: 0.5rem;
			.btn{
				width: 2rem;
				height: 0.6rem;
				font-size: 0.3rem;
				background-color: #ddd;
			}
		}
	}
</style>
